import React from 'react';
import { connect } from 'dva';
import { Select, Switch, Button, Table, Pagination, Input, message, Modal, DatePicker } from 'antd';
import { VtxGrid } from 'vtx-ui';
import { NAME_SPACE, Add_Form, SearchParams } from '../../../components/CollectionDemand/config'
import styles from './collectionDemand.less'
import moment from 'moment'

const Index = ({dispatch, collectionDemand}) => {
  const {
    loading,
    pageNo,
    pageSize,
    total,
    searchParams,
    oldSearchParams,
    date,
    dataList,
  } = collectionDemand

  const gridProps = {
    titles: ['上报日期'],
    gridweight: [1],
    // 点击确定
    confirm: () => {
      dispatch({
        type: `${NAME_SPACE}/getList`,
        payload: {type: 'search'}
      })
    },
    // 重置
    clear: () => {
      dispatch({
        type: `${NAME_SPACE}/updateState`,
        payload: {
          searchParams: {...SearchParams},
          pageNo: 1,
          pageSize: 20,
          date: moment().format('YYYY-MM-DD')
        }
      })
      dispatch({
        type: `${NAME_SPACE}/getList`,
        payload: {type: 'search'}
      })
    },
  }

  const tableProps = {
    autoFit: true,
    hideColumn: false,
    indexColumn: true,
    showHeader: true,
    scroll:{
      y:`${document.documentElement.clientHeight - 50 - 120}px`,
    },
    startIndex: (pageNo) * pageSize + 1,
    dataSource: dataList,
    loading: loading,
    pagination: false,
    columns: [
      {
        title: '序号', 
        key: '0',
        dataIndex: '0',
        ellipsis: true,
        render: (text, record, index) => {return `${index+1}`}
      },{
        title: '时间', 
        key: 'createTime',
        dataIndex: 'createTime',
        ellipsis: true,
        sorter: (a, b) =>  a.createTime - b.createTime ,
        render: (text, record, index) => {return moment(text).format('HH:mm:ss')}
      },{
        title: '医疗机构名称', 
        key: 'hospitalName',
        dataIndex: 'hospitalName',
        ellipsis: true,
      },{
        title: '待收集桶数(个)', 
        key: 'bucketNum',
        dataIndex: 'bucketNum',
        ellipsis: true,
      },{
        title: '待收集重量(KG)', 
        key: 'weight',
        dataIndex: 'weight',
        ellipsis: true,
      },{
        title: '期望收运日期', 
        key: 'expectData',
        dataIndex: 'expectData',
        ellipsis: true,
        render: (text, record, index) => {return moment(text).format('YYYY-MM-DD')}
      },{
        title: '联系人', 
        key: 'contacts',
        dataIndex: 'contacts',
        ellipsis: true,
      },{
        title: '联系方式', 
        key: 'phone',
        dataIndex: 'phone',
        ellipsis: true,
      }
    ],
    rowKey: (record, index) => {
      return index
    },
  }
  const pagProps = {
    current: pageNo ,
    defaultCurrent: 1,
    total: total,
    pageSize: pageSize,
    showQuickJumper: true,
    showSizeChanger: true,
    onChange: (page) => {
      dispatch({
        type: `${NAME_SPACE}/updateState`,
        payload: {
          pageNo: page 
        }
      });
      // 获取新的列表（page）
      dispatch({
        type: `${NAME_SPACE}/getList`,
        payload: {type: 'page'}
      })
    },
    showTotal: (total) => {
        return `合计${total}条数据`
    },
    onShowSizeChange: (current, pageSize) => {
      dispatch({
        type: `${NAME_SPACE}/updateState`,
        payload: {
          pageNo: 1,
          pageSize: pageSize,
        }
      });
      // 获取新的列表（page）
      dispatch({
        type: `${NAME_SPACE}/getList`,
        payload: {type: 'page'}
      })
    },
  }

  const changeDate = (value) => {
    // console.log(value)
    dispatch({
      type: `${NAME_SPACE}/updateState`,
      payload: {
        date: value
      }
    })
    dispatch({
      type: `${NAME_SPACE}/updateSubState`,
      payload: {
        sub: 'searchParams',
        data: {
          startTime: moment(value).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
          endTime: moment(value).endOf('day').format('YYYY-MM-DD HH:mm:ss')
        }
      }
    })
  }

  return (
    <div className={styles.normal}>
      <div className={styles.searchWarp}>
        <VtxGrid {...gridProps}>
          <DatePicker
            value={moment(date)}
            onChange={(date,  dateString) => {changeDate(dateString)}}
            format={'YYYY-MM-DD'}
            allowClear
            showToday
          />
        </VtxGrid>
      </div>
      <div className={styles.table} style={{ height: document.documentElement.clientHeight-50 }}>
        <div className={styles.tableContent}>
          <Table {...tableProps}/> 
        </div>  
        <div className={styles.pagination}>
          <span className={styles.pagContent}> <Pagination {...pagProps}/> </span>  
        </div>  
      </div>  
    </div>
  )
}

export default connect(state=>state)(Index)